<template>
  <div class="completedOrder-page">
    <breadcrumb />
    <div class="search-container">
      <Search :listData="listData" @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <Table :tableData="table.data" :loading="table.loading" @table="getTableParams" />
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="pagination.pageSizes"
            layout="total,sizes, prev, pager, next, jumper"
            :total="table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Table from "./components/table.vue";
import { ref, reactive, shallowRef } from "vue";
import { getProcessOrders } from "./request.js";
import { getCparkList } from "@/service/modules/publicModule";

// 搜索
const searchModel = ref({});

// 搜索操作
const getSearchParams = (value) => {
  // searchParams.value = value;
  searchModel.value = value;
  getData();
};

// table操作
const getTableParams = (value) => {
  console.log("value ===>", value);
  if (value.operation === 1) {
    window.open(
      window.location.origin +
        "/nc/iop/#/order/park/process/details?id=" +
        value.orderId
    );
  }
};

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

const getData = async () => {
  table.loading = true;
  await getProcessOrders({
    keyword: searchModel.value.keyword,
    lotId: searchModel.value.lotId,
    inStart: searchModel.value.inStart,
    inEnd: searchModel.value.inEnd,
    duration: searchModel.value.duration,
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
  }).then((res) => {
    console.log("res ===>", res);
    if (res.data.code === 0) {
      table.data = res.data.result.items;
      table.total = parseInt(res.data.result.total);
      table.loading = false;
    }
  });
};

const listData = reactive({
  lotIdList: [],
  payWayList: [
    {
      id: 0,
      name: "免费",
    },
    {
      id: 1,
      name: "微信",
    },
    {
      id: 2,
      name: "支付宝",
    },
    {
      id: 3,
      name: "钱包",
    },
  ],
});

const init = async () => {
  await getCparkList().then((res) => {
    listData.lotIdList = res.data.result.map((item) => {
      return {
        id: item.key,
        name: item.value,
      };
    });
  });
};

getData();
init();
</script>

<style lang="less" scoped>
.completedOrder-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-component {
    .submit-btns {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .submit-btns-right {
      display: flex;
    }
    .submit-btn-export {
      background: #35c362;
      border: 1px solid #35c362;
      border-radius: 2px;
      margin-left: 12px;
      padding: 5px 16px;
    }
    .icon-img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    .table {
      margin-bottom: 15px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
